{extend name="./base" /}

{block name="css"}{/css}

{block name="body"}
<div class="layui-fluid">
	<div class="layui-card">
		<!-- 搜索表单 -->
		<form class="layui-form layui-card-header layuiadmin-card-header-auto">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">活动名称</label>
					<div class="layui-input-inline">
						<input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">奖品名称</label>
					<div class="layui-input-inline">
						<input type="text" name="prize_name" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="formSearch">
						<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
					</button>
				</div>
			</div>
		</form>

		<!-- TABLE正文 -->
		<div class="layui-card-body">
			<table id="tableList" lay-filter="tableList" class="layui-table"></table>
		</div>

		<!-- 表头操作 -->
		<script type="text/html" id="toolBar">
			<a class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</a>
		</script>

		<!-- 表格列操作 -->
		<script type="text/html" id="actBar">
			<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
		</script>

		<!-- 表格状态列 -->
		<script type="text/html" id="statusBar">
			<input type="checkbox" lay-filter="changeStatus" value="{{d.id}}" lay-skin="switch"
				   lay-text="启用|禁用" {{d.status==1?'checked':''}} style="display: none;"/>
			<p style="display: none;">{{d.status==1?'启用':'禁用'}}</p>
		</script>
	</div>
</div>

{/block}

{block name="script"}
<script>
	layui.use(['layer', 'form', 'table'], function () {
		var table = layui.table, form = layui.form, $ = layui.$;
		table.render({
			elem: '#tableList'
			,url:'/admin/activity/index'
			,id: 'thisTable'
			,cols: [[
				{field:'id', title: 'ID', width: 50, type:'checkbox'},
				{field:'title', title: '活动名'},
				{title: '开奖机制', templet: function(obj){
					if (obj.cycle_type == 2){
						return '周期机制';
					}else if(obj.cycle_type == 3){
						return '无限制机制';
					} else {
						return '普通机制';
					}
				}},
				{field:'prize_name', title: '奖品名称'},
				{field:'prize_num', title: '奖品数量'},
				{title: '开始时间', templet: function(obj){
					return timeToDate(obj.start_time);
				}},
				{title: '开始时间', templet: function(obj){
					return timeToDate(obj.end_time);
				}},
				{field: 'status', title: '状态', templet: '#statusBar', align: 'center'},
				{title: '操作', toolbar: '#actBar', align: 'center', minWidth: 130}
			]]
			,defaultToolbar: ['filter']
			,toolbar: '#toolBar'
			,page: true
		});

		// 监听搜索
		form.on('submit(formSearch)', function(data){
			var field = data.field;
			table.reload('thisTable', {where: field})
			return false;
		});

		// 监听操作按钮
		table.on('tool(tableList)', function(obj){
			let data = obj.data, event = obj.event;
			switch (event){
				case 'edit':
					window.location.href = '/admin/activity/edit?id=' + data.id
					break;
				case 'del':
					let ids = [];
					ids.push(data.id);
					comDel(ids, '/admin/activity/del')
					break;
				default:
					return false;
			}
		})

		// 监听表头操作按钮
		table.on('toolbar(tableList)', function(obj){
			let event = obj.event;
			switch (event){
				case 'add':
					window.location.href = '/admin/activity/edit'
					break;
				default:
					return false;
			}
		})

		// 修改状态
		form.on('switch(changeStatus)', function (obj) {
			var loadIndex = layer.load(2);
			$.post('/admin/activity/edit', {
				'form[id]': obj.elem.value,
				'form[status]': obj.elem.checked ? 1 : 2
			}, function (res) {
				layer.close(loadIndex);
			}, 'json');
		});

	});
</script>
{/block}